<template>
  <div id="app">
    
    <HeadIndex></HeadIndex>
     <div class="sectionTop">
                    <router-link tag="span" to="/goods">商品</router-link>
                     <router-link tag="span" to="/pingjia">评价</router-link>
                     <router-link tag="span" to="/ShangJia">商家</router-link>
        </div>
        <router-view></router-view>
    <FooterIndex></FooterIndex>
    <FoodsDetailVue></FoodsDetailVue>
  </div>
</template>

<script>
import FooterIndex from './views/FooterIndex.vue'
import HeadIndex from './views/HeadIndex.vue'
import FoodsDetailVue from './components/FoodsDetail.vue'
export default {
  name: 'App',
  components: {
    FooterIndex,
    HeadIndex,
    FoodsDetailVue,
  },
  methods:{
  }
}
</script>


<style>
@import url(../src/static/phone_common.css);
.book, .headbottom .headbottom2 {
  overflow: hidden;
  -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
  white-space: nowrap;
}

.clearflow::after {
  content: "";
  display: block;
  clear: both;
}

.content, section {
  min-height: 8.86rem;
}

html, body {
  width: 100%;
  height: 100%;
}

html {
  font-size: 13.3333333333vw;
}

#app {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.router-link-active{
  color: rgb(240,20,20)
}
.sectionTop {
  width: 100%;
  height: 1rem;
  min-height: 1rem;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgba(7,17,27,.1);
  font-size: 0.28rem;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.sectionTop .span {
  color: rgb(77, 85, 93);
  -webkit-box-flex: 1;
  -webkit-flex: 1;
     -moz-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
</style>
